<template>
  <div class="school">
      <h2>我是学校组件</h2>
      <hr/>
      <h4>学校名称:{{school.name}}</h4>
      <h4>学校地址:{{school.address}}</h4>
      <h4>学校年龄:{{school.age}}</h4>
      <hr/>
      <h4>saying组件中的长度是:{{saying.length}}</h4>
      <hr/>
      <select v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button @click = 'addSchoolAge(n)'>学校年龄增加</button>
  </div>
</template>

<script>
    import { mapState,mapMutations} from 'vuex'
    export default {
        name: 'School',
        data() {
            return {
                n: 1,
            }
        },
        // mapState方法的优化
        computed: {
            ...mapState(['school','saying'])
        },
        // mapMutations方法的优化
        methods:{
            ...mapMutations({addSchoolAge:'ADD_SCHOOL_AGE'})
        }
    }
</script>

<style scoped>
    .school{
        background-color: skyblue;
        padding: 10px;
    }
</style>